/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component,Fragment } from 'react';
import { Form, Button, Badge, Select, DatePicker, Radio, Descriptions, Input, Typography, Modal } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import request from '@/utils/request';
import { download, leaveStatue,leaveStatueImg } from '@/utils/utils';
import config from '@/config/config';
import gold from '../../images/gold.png';
import ReactDataGrid from 'react-data-grid';
const confirm =Modal.confirm;
const { Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      all_users: [],
      format: 'YYYY-MM-DD',
    };
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const editRecord = this.props.editRecord;
    const defaultColumnProperties = {
      resizable: true,
    };
    const columns = [
      {
        name: '项目名称',
        key: 'name',
        width: 180,
      },
      {
        name: '单价',
        key: 'price',
        width: 100,
      },
      {
        name: '数量',
        key: 'count',
        width: 100,
      },
      {
        name: '小计',
        key: 'subtotal',
        width: 100,
      },
      {
        name: '备注',
        key: 'remark',
        width: 150,
      },
    ].map(c => ({ ...defaultColumnProperties, ...c }));

    return (
      <div>
        <Form>
          {leaveStatueImg(this.props.editRecord.status)}
          <Descriptions column={3} className={'blue-descriptions'} title={<div style={{ textAlign: 'center' }}>报销详情</div>}
                        bordered>
            <Descriptions.Item label="申请人" span={3}>
              {this.props.editRecord.applicant.department_name}/{this.props.editRecord.applicant.name}
            </Descriptions.Item>
            <Descriptions.Item label="报销人" span={3}>
              {this.props.editRecord.reimburser.department_name}/{this.props.editRecord.reimburser.name}
            </Descriptions.Item>
            <Descriptions.Item label="报销金额"  span={3}>
              <img style={{width:'30px',height:'30px'}} className={'gold'} src={gold} alt=""/> {this.props.editRecord.amount}
            </Descriptions.Item>
            <Descriptions.Item label="报销类型"  span={3}>
              {this.props.editRecord.type}
            </Descriptions.Item>
            <Descriptions.Item label="报销事由" span={3} style={{ whiteSpace: 'wrap' }}>
              <Paragraph style={{ fontWeight: 'bold', color: '#000' }} ellipsis={{ rows: 3, expandable: true }}>
                {this.props.editRecord.cause}
              </Paragraph>
            </Descriptions.Item>
            {
              (this.props.editRecord.reimbursement_list_items&&this.props.editRecord.reimbursement_list_items.length>0)&&
              <Descriptions.Item label="报销项目" span={3} >
                <ReactDataGrid
                  columns={columns}
                  rowGetter={i => {
                    return { ...this.props.editRecord.reimbursement_list_items[i], _index: i };
                  }}
                  rowsCount={this.props.editRecord.reimbursement_list_items.length}
                  minHeight={this.props.editRecord.reimbursement_list_items.length*35+36}
                />
              </Descriptions.Item>
            }
            {
              (this.props.editRecord.attachments && this.props.editRecord.attachments.length > 0) &&
              <Descriptions.Item label="报销附件" span={3}>
                {
                  this.props.editRecord.attachments.map((item, index) => {
                    return <div key={index} style={{ cursor: 'pointer', textDecoration: 'under-line', color: 'blue' }}
                                onClick={() => {
                                  download(`${config.prefix}/reimbursement_lists/${this.props.editRecord.id}/attachments/${item.key}/download?token=Bearer ${sessionStorage.getItem('token')}`);
                                }}>
                      {item.name}
                    </div>;
                  })
                }
              </Descriptions.Item>
            }

            <Descriptions.Item label="状态" span={3}>
              {leaveStatue(this.props.editRecord.status)}
            </Descriptions.Item>
            {
              this.props.editRecord.reviewers.map((item,index)=>{
                let statusColor1=''
                let statucText=''
                if(item.status===2){
                  statusColor1='#006af0'
                }else if(item.status===3){
                  statusColor1='#ff0006'
                  statucText=' 不通过'
                }else if(item.status===4){
                  statusColor1='#1e9680'
                  statucText=' 通过'
                }
                return <Fragment key={index}>
                  <Descriptions.Item label="审批人" span={1}>
                    <div style={{color:statusColor1}}>  {item.name}</div>
                  </Descriptions.Item>
                  <Descriptions.Item label="审批时间" span={1}>
                    <div style={{color:statusColor1}}>  {item.operating_time + statucText}</div>
                  </Descriptions.Item>
                  <Descriptions.Item label="审批备注" span={1}>
                    <div style={{color:statusColor1}}>  {item.remark}</div>
                  </Descriptions.Item>
                </Fragment>
              })
            }
            {
              this.props.editRecord.replicators.map((item,index)=>{
                let statusColor1=''
                return <Fragment key={index}>
                  <Descriptions.Item label="抄送人" span={1}>
                    <div style={{color:statusColor1}}>  {item.name}</div>
                  </Descriptions.Item>
                  <Descriptions.Item label="确认时间" span={2}>
                    <div style={{color:statusColor1}}>  {item.operating_time?item.operating_time+' 已读':''}</div>
                  </Descriptions.Item>
                </Fragment>
              })
            }
          </Descriptions>
        </Form>
        {
          (this.props.type === 'reimbursement_approve' &&this.props.editRecord.status === 2 &&
            this.props.editRecord.reviewers.map((item,index)=>{
              return item.name
            }).indexOf(sessionStorage.getItem('username'))>=0)&&
          <Fragment>
            <Descriptions className={'blue-descriptions'} style={{marginTop:'10px'}} title={<div style={{ textAlign: 'center' }}>报销审批</div>} bordered>

              <Descriptions.Item label="审批备注" span={3}>
                {getFieldDecorator('review_remark', {
                  initialValue: this.props.editRecord ? this.props.editRecord.review_remark : '',
                })(
                  <TextArea rows={2}/>,
                )}

              </Descriptions.Item>
              <Descriptions.Item label="审批操作" span={3}>
                {getFieldDecorator('status', {
                  initialValue: 4,
                })(
                  <Radio.Group>
                    <Radio value={4}>通过审批</Radio>
                    <Radio value={3}>不通过审批</Radio>
                  </Radio.Group>,
                )}
                <Button type={'primary'} size={'small'} onClick={() => {
                  const that = this;
                  const formValues = this.props.form.getFieldsValue();
                  confirm({
                    title: `确定要${formValues.status === 4 ? '通过' : '不通过'}审批吗?`,
                    content: '请谨慎操作',
                    okText: '确定',
                    cancelText: '取消',
                    centered: true,
                    maskClosable: true,
                    onOk() {
                      request(`/reimbursement_lists/${editRecord.id}/review`, {
                        method: 'PUT',
                        params: {
                          ...formValues,
                        },
                      }).then((response) => {
                        if (response.status === 200) {
                          that.props.save();
                        }
                      });
                    },
                    onCancel() {
                      console.log('Cancel');
                    },
                  });
                }}>确定</Button>
              </Descriptions.Item>
            </Descriptions>
          </Fragment>
        }

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


